<template>
    <div class="box">
        <p class="title">
          我的留言管理中心之垃圾箱
        </p> 
        <br>
        <bo-list 
        :list='list' 
        :isMy='true'
        @handleMsgStatus='handleMsgStatus'
        ></bo-list>
        <bo-msg-popup 
        :msg='msg'
        :msgStatus='msgStatus'
        @handleMsgStatus='handleMsgStatus'
        @sendRequest='sendRequest'
        ></bo-msg-popup>
    </div>
</template>

<script>
import BoList from '@/components/list'
import BoEditPopup from '@/components/editPopup'
import BoMsgPopup from '@/components/messagePopup'
import Api from '@/api/messageboard'
export default {
  name: 'HelloWorld',
  components:{
    BoList,
    BoEditPopup,
    BoMsgPopup
  },
  data () {
    return {
      msg:'',
      list:[],
      editStatus:false,
      msgStatus:false,
      form:{}
    }
  },
  created(){
    this.getGarbageList()
  },
  methods:{
    getGarbageList(data){
        Api.getGarbageList(data).then(res=>{
          if(res.status===-1){
           return this.$router.push('/login') 
          }
            this.list = res.data
        })
    },
    sendRequest(){
      if(this.form.recovery){
        Api.recovery(this.form).then(res => {
          if(res.status === 200){
              this.msgStatus = false
              return this.getGarbageList()
          }
        })
      }else{
        Api.deleteMessageboard(this.form).then( res => {
            if(res.status === 200){
                this.msgStatus = false
                return this.getGarbageList()
            }
        })
      }
    },
    handleMsgStatus(data,recovery){
        if(recovery){
          this.msg = `真的要恢复嘛？`
          data.recovery = true
        }else{
          this.msg = `真的要删除嘛？`
          data.recovery = false
        }
        if(typeof data==='object'){
           this.msgStatus = true
           return this.form = data
        }
        this.msgStatus = data
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
  .box
    width 1000px
    margin 0 auto
  p.title 
    text-align center
</style>
